<template>
  <div>
    <!-- 按钮权限 -->
    <!-- {{$refs.tree.getCheckedKeys()}} -->
    <!-- {{squaredata}} -->
    <!-- {{pitchon}} -->
    <el-tree
    class="eltree"
      :data="T_data"
      show-checkbox
      node-key="id"
      ref="tree"
      :default-checked-keys="C_arr_data"
      :props="defaultPropsLeft"
      @node-click="NodeClick"
      @check-change="checkChange"
    ></el-tree>
  </div>
</template>
<script>
export default {
  props: ["squaredata", "pitchon"],
  data() {
    return {
      //选中的
      C_arr_data: [],
      checkChangeData: [],
      piton: [],
      //   C3:this.$refs.tree.getCheckedKeys(),
      //数据
      T_data: [],
      //属性
      defaultPropsLeft: {
        children: "children",
        label: "name"
      }
    };
  },

  mounted() {
    // this.$refs.tree.setCheckedKeys([]);
    this.T_data = JSON.parse(JSON.stringify(this.squaredata));
    this.piton = JSON.parse(JSON.stringify(this.pitchon.data));
    console.log("小方块节点！——————————");
    console.log(this.pitchon.data);
    console.log(this.pitchon);
    let ARR = this.pitchon.data;
    let B = [];
    if (this.pitchon["data"]) {
      if (this.pitchon["data"].length > 0) {
        ARR.forEach(val => {
          B.push(val.buttonId);
        });
      }
    }
    console.log(B);
    this.$refs.tree.setCheckedKeys(B);
    let getCN = this.$refs.tree.getCheckedNodes();
  },
  watch: {
    C_arr_data: {
      handler(newValue, oldValue) {
        console.log("当前选中的>>>>>");
        let pitc = JSON.parse(JSON.stringify(this.pitchon));
        let newVD = pitc.concat(newValue);
        this.$bus.$emit("BackPitchArr", newValue);
      },
      deep: true
    },
    pitchon: {
      handler(newValue, oldValue) {
        // this.$refs.tree.setCheckedKeys([]);
        this.T_data = JSON.parse(JSON.stringify(this.squaredata));
        this.piton = JSON.parse(JSON.stringify(this.pitchon.data));
        console.log("小方块节点！——————————2");
        console.log(this.pitchon.data);
        console.log(this.pitchon);
        let ARR = this.pitchon.data;
        let B = [];
        if (this.pitchon["data"]) {
          if (this.pitchon["data"].length > 0) {
            ARR.forEach(val => {
              B.push(val.buttonId);
            });
          }
        }
        console.log(B);
        this.$refs.tree.setCheckedKeys(B);
        let getCN = this.$refs.tree.getCheckedNodes();
      },
      deep: true
    }
  },
  methods: {
    //点击节点
    NodeClick(val) {
      console.log("点击节点");
      console.log(val, this.pitchon);
    },
    //节点发生变化
    checkChange(val) {
      this.checkChangeData.push(val);
      console.log("节点发生变化",val);
      // console.log(this.pitchon.data)
      // console.log(val)

      //this.piton.push(val);
      //console.log(this.piton)
      console.log('----------------------')
      //console.log(this.C_arr_data)
       //console.log(this.$refs.tree.getCheckedNodes());
       let XZ=this.$refs.tree.getCheckedNodes()
      this.$emit("backsquare",XZ);
    }
  }
};
</script>
<style lang="scss" scoped>
.eltree{
  background: #F0F4FA;
}
</style>